<template>
  <div class="webchatQueueConfig">
    <el-form class="m7-form" :rules="webchatQueueConfigRule" size="mini" :model="webchatQueueConfigForm"
      ref="webchatQueueConfigForm" label-position="top">
      <el-form-item prop="agent" size="mini">
        <span slot="label">
          座席分配策略
          <el-tooltip placement="top">
            <div slot="content">{{recurrentTip[webchatQueueConfigForm.assignStrategy]}}</div>
            <i class="V7_iconfont V7_iconV7tubiao_bangzhu-42 tooltip"></i>
          </el-tooltip>
        </span>
        <m7Select
          size="mini"
          filterable
          :options="agentOptions"
          :defaultProps="{value: 'value', label: 'label'}"
          v-model="webchatQueueConfigForm.assignStrategy"
          placeholder="请选择">
        </m7Select>
      </el-form-item>
      <!-- <el-form-item label="座席记忆" prop="isAgentMemory" size="mini">
        <el-radio size="mini" v-model="webchatQueueConfigForm.isAgentMemory" :label="true">是</el-radio>
        <el-radio size="mini" v-model="webchatQueueConfigForm.isAgentMemory" :label="false">否</el-radio>
      </el-form-item>
      <el-form-item label="专属座席" prop="isVipAgent" size="mini">
        <el-radio size="mini" v-model="webchatQueueConfigForm.isVipAgent" :label="true">是</el-radio>
        <el-radio size="mini" v-model="webchatQueueConfigForm.isVipAgent" :label="false">否</el-radio>
      </el-form-item> -->
      <el-form-item prop="maxTime" size="mini">
        <span slot="label">
          最大排队时长
          <el-tooltip placement="top">
            <div slot="content">设置后可在流程管理配置超时溢出，0则不溢出</div>
            <i class="V7_iconfont V7_iconV7tubiao_bangzhu-42 tooltip"></i>
          </el-tooltip>
        </span>
        <el-input type="number" v-model.number="webchatQueueConfigForm.maxTime" placeholder="请输入" size="mini">
          <template slot="append">min</template>
        </el-input>
      </el-form-item>
      <el-form-item label="最大排队人数" prop="maxNum" size="mini">
        <span slot="label">
          最大排队人数
          <el-tooltip placement="top">
            <div slot="content">设置后可在流程管理配置排队数超量溢出，0则不溢出</div>
            <i class="V7_iconfont V7_iconV7tubiao_bangzhu-42 tooltip"></i>
          </el-tooltip>
        </span>
        <el-input type="number" v-model.number="webchatQueueConfigForm.maxNum" placeholder="请输入" size="mini" @change="laterTimeChange">
        </el-input>
      </el-form-item>
      <el-form-item label="排队保持设置" prop="queueLaterTime" size="mini">
        <span slot="label">
          排队保持设置
          <el-tooltip placement="top">
            <div slot="content">访客在排队时离开后N分钟再进入该技能组将继续之前排队</div>
            <i class="V7_iconfont V7_iconV7tubiao_bangzhu-42 tooltip"></i>
          </el-tooltip>
          <el-switch
            style="marginLeft: 5px"
            v-model="webchatQueueConfigForm.isQueueLater">
          </el-switch>
        </span>
        <el-input @change="laterTimeChange" type="number" v-model.number="webchatQueueConfigForm.queueLaterTime" placeholder="请输入" size="mini">
          <template slot="append">min</template>
        </el-input>
      </el-form-item>
    </el-form>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { isNumber2 } from '@/utils/validate'
const validateNumber = (rule: any, value: string, callback: any) => {
  if (!isNumber2(value)) {
    callback(new Error('请输入正整数'))
  } else if (Number(value) < 0) {
    callback(new Error('请输入正整数'))
  } else {
    callback()
  }
}
const validateNumber1 = (rule: any, value: string, callback: any) => {
  if (!isNumber2(value)) {
    callback(new Error('请输入正整数'))
  } else if (Number(value) < 0 || Number(value) > 120) {
    callback(new Error('请输入0-120之间的数'))
  } else {
    callback()
  }
}
@Component({
  name: 'webchatQueueConfig'
})
export default class WebchatQueueConfig extends Vue {
  private $message: any
  private webchatQueueConfigRule = {
    maxNum: [{ required: true, trigger: 'blur', validator: validateNumber }],
    maxTime: [{ required: true, trigger: 'blur', validator: validateNumber }],
    queueLaterTime: [{ require: true, trigger: 'blur', validator: validateNumber1 }]
  }

  public webchatQueueConfigForm = {
    assignStrategy: 'queue', // 座席分配策略
    // isAgentMemory: false,
    // isVipAgent: false,
    maxNum: 0, // 最大排队人数
    maxTime: 0, // 最大排队时长
    queueLaterTime: 0,
    isQueueLater: false
  }

  private agentOptions = [
    { label: '轮选', value: 'queue' },
    { label: '随机', value: 'random' },
    { label: '技能', value: 'priority' },
    { label: '平均', value: 'least' }
  ]

  private recurrentTip = {
    queue: '按照技能组内座席的登录顺序依次分配',
    random: '对技能组内座席成员随机分配',
    priority: '按照座席技能值从高到低顺序分配，技能值相同时随机',
    least: '优先分配给从当日零点起接待会话量最少的座席，以维持各座席接待量平均'
  }

  private laterTimeChange () {
    const { queueLaterTime, maxNum } = this.webchatQueueConfigForm
    if (queueLaterTime < 0 && queueLaterTime > 120) {
      this.$message.error('排队保持设置上下限为0～120min')
      this.webchatQueueConfigForm.queueLaterTime = 0
    }
  }

  public setWebchatQueueConfigData (obj?: any) {
    if (obj) {
      const { assignStrategy, maxNum, maxTime, queueLaterTime, isQueueLater } = obj
      this.webchatQueueConfigForm = {
        assignStrategy,
        maxNum,
        maxTime,
        queueLaterTime: queueLaterTime || 0,
        isQueueLater: isQueueLater || false
      }
    } else {
      this.webchatQueueConfigForm = {
        assignStrategy: 'queue',
        maxNum: 0,
        maxTime: 0,
        queueLaterTime: 0,
        isQueueLater: false
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
  .webchatQueueConfig
    width 45%
    .tooltip
      color #a5a5ad
      font-size 12px
      cursor pointer
</style>
